<template>
    <div class="login_wrap">
        <div class="login_box">
            <!-- 头像区域 -->
            <div class="avater_box">
                <img src="@a/img/logo.png" alt="">
            </div>
            <!-- 登录区域 -->
            <el-form ref="form" :model="form" label-width="70px" >
            <el-form-item label="用户名">
                <el-input v-model.trim="form.name" ></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <!-- <el-input v-model="form.password" ></el-input> -->
                <el-input placeholder="请输入密码" v-model.trim="form.password" show-password></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onLogin">登录</el-button>
                <el-button type="primary" @click="goRegister">注册</el-button>
            </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default{
    data(){
        return {
            form :{
                name:'',
                password:'',
            }
        }
    },
    methods:{
        onLogin(){
            console.log('登录');
            console.log(this.$store.state);
            // console.log(this.form.name,this.form.password);
            // 在登录当中触发actions当中的login_a方法
            this.$store.dispatch("login_a",{
                user_name:this.form.name,
                password:this.form.password,
                routerT:this.$router, //将$router传递给actions login_a
            })
            
            // 登录成功之后跳转进入主页 使用编程式路由导航跳转
            // dispatch----actions(login_a)在login_a中登录的Ajax发送请求 actions当中无$router
            // dispatch成功之后再进行跳转 dispatch是一个promise对象 异步变同步 async await  断掉了 逻辑不通
            // 确认登录成功之后 actions 返回result actions中有登录成功的判断条件 但是没有$router 要知道$router在vue实例对象上存在或组件对象 dispatch可以在actions上进行传值
            //  登录成功之后才可以使用编程式路由导航进行跳转
        },
        goRegister(){
            // 点击注册跳转到注册页面
            console.log('去注册页面');
            this.$router.push({
                name:'register',
            });
        }
    }
}
</script>

<style lang="scss" scoped>
    .login_wrap{
        background-color: rgb(121, 206, 209);
        .login_box{
            width: 330px;
            height: 230px;
            background-color: aliceblue;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            .avater_box{
                img{
                    width: 80px;
                    height: 60px;
                    border: 3px solid white;
                    border-radius: 50%;
                    background-color: rgb(245, 248, 230);
                    box-shadow: 0 0 15px gainsboro;
                    position: absolute;
                    left: 50%;
                    transform: translate(-50%,-57%);
                }
            }
            .el-form{
                height: 30px;
                position: absolute;
                top: 30px;
            }
        }
    }
</style>